<template>
    <div class="product-detail container">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>手机</el-breadcrumb-item>
            <el-breadcrumb-item>苹果手机</el-breadcrumb-item>
            <el-breadcrumb-item>{{ product.title }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 商品主区域 -->
        <div class="main-area">
            <!-- 商品图片 -->
            <div class="product-gallery">
                <el-image
                    :src="product.mainImage"
                    class="main-image"
                    :preview-src-list="product.images"
                    fit="contain"
                />

                <div class="thumbnails">
                    <el-image
                        v-for="(img, index) in product.images"
                        :key="index"
                        :src="img"
                        class="thumbnail"
                        @click="currentImage = img"
                    />
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="product-info">
                <h1 class="title">{{ product.title }}</h1>

                <div class="price-area">
                    <div class="current-price">¥{{ product.price }}</div>
                    <div class="original-price" v-if="product.originalPrice">
                        价格: <del>¥{{ product.originalPrice }}</del>
                    </div>
                </div>

                <div class="sales">月销量: {{ product.sales }}件</div>

                <el-divider />

                <!-- 规格选择 -->
                <div class="spec-section">
                    <div class="spec-title">规格:</div>
                    <el-radio-group v-model="selectedSpec">
                        <el-radio
                            v-for="spec in product.specs"
                            :key="spec"
                            :label="spec"
                            border
                        >
                            {{ spec }}
                        </el-radio>
                    </el-radio-group>
                </div>

                <!-- 数量选择 -->
                <div class="quantity-section">
                    <div class="spec-title">数量:</div>
                    <el-input-number
                        v-model="quantity"
                        :min="1"
                        :max="100"
                    />
                </div>

                <el-divider />

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <el-button
                        type="danger"
                        size="large"
                        icon="el-icon-shopping-cart-full"
                        @click="addToCart"
                    >
                        加入购物车
                    </el-button>
                    <el-button
                        type="warning"
                        size="large"
                        icon="el-icon-bank-card"
                        @click="buyNow"
                    >
                        立即购买
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 商品详情 -->
        <div class="detail-section">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="商品详情" name="detail">
                    <div class="detail-content" v-html="product.detail"></div>
                </el-tab-pane>
                <el-tab-pane label="规格参数" name="spec">
                    <el-table :data="product.specTable" style="width: 100%">
                        <el-table-column prop="name" label="参数名称" width="180" />
                        <el-table-column prop="value" label="参数值" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="用户评价" name="reviews">
                    <div v-for="review in product.reviews" :key="review.id" class="review-item">
                        <div class="review-header">
                            <el-avatar :size="40" :src="review.avatar" />
                            <div class="user-info">
                                <div class="username">{{ review.username }}</div>
                                <el-rate v-model="review.rating" disabled />
                            </div>
                            <div class="review-time">{{ review.time }}</div>
                        </div>
                        <div class="review-content">{{ review.content }}</div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 推荐商品 -->
        <div class="section-title">看了又看</div>
        <el-row :gutter="20">
            <el-col
                v-for="product in recommendProducts"
                :key="product.id"
                :xs="12" :sm="8" :md="6" :lg="4" :xl="4"
            >
                <product-card :product="product" />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import ProductCard from '@/components/ProductCard.vue'

export default {
    components: { ProductCard },
    setup() {
        const route = useRoute()
        const store = useStore()

        const product = ref({
            id: route.params.id,
            title: 'Apple iPhone 14 Pro Max 5G手机 全网通 暗紫色 512GB',
            mainImage: 'https://via.placeholder.com/600x600/3366cc/ffffff?text=iPhone',
            images: [
                'https://via.placeholder.com/600x600/3366cc/ffffff?text=iPhone+1',
                'https://via.placeholder.com/600x600/3366cc/ffffff?text=iPhone+2',
                'https://via.placeholder.com/600x600/3366cc/ffffff?text=iPhone+3',
                'https://via.placeholder.com/600x600/3366cc/ffffff?text=iPhone+4'
            ],
            price: 9899,
            originalPrice: 10999,
            sales: 3500,
            specs: ['128GB', '256GB', '512GB', '1TB'],
            detail: `
        <div class="detail-content">
          <h3>产品特色</h3>
          <p>Apple iPhone 14 Pro Max 采用全新设计的灵动岛，带来全新的交互体验。搭载A16仿生芯片，性能更强大。</p>
          <img src="https://via.placeholder.com/800x400/3366cc/ffffff?text=产品特色" style="width:100%;margin:15px 0">
          <h3>摄像头系统</h3>
          <p>4800万像素主摄，支持ProRAW格式拍摄，专业级影像体验。电影模式支持4K HDR拍摄。</p>
          <img src="https://via.placeholder.com/800x400/3366cc/ffffff?text=摄像头" style="width:100%;margin:15px 0">
          <h3>显示屏</h3>
          <p>6.7英寸超视网膜XDR显示屏，支持ProMotion自适应刷新率技术，最高120Hz刷新率。</p>
          <img src="https://via.placeholder.com/800x400/3366cc/ffffff?text=显示屏" style="width:100%;margin:15px 0">
        </div>
      `,
            specTable: [
                { name: '品牌', value: 'Apple' },
                { name: '型号', value: 'iPhone 14 Pro Max' },
                { name: '颜色', value: '暗紫色' },
                { name: '存储容量', value: '512GB' },
                { name: '操作系统', value: 'iOS 16' },
                { name: '处理器', value: 'A16仿生芯片' },
                { name: '屏幕尺寸', value: '6.7英寸' },
                { name: '分辨率', value: '2796×1290像素' },
                { name: '摄像头', value: '4800万像素主摄+1200万像素超广角+1200万像素长焦' },
                { name: '电池容量', value: '4323mAh' },
                { name: '网络', value: '5G全网通' }
            ],
            reviews: [
                {
                    id: 1,
                    username: '数码达人',
                    avatar: 'https://via.placeholder.com/40/ff0036/ffffff?text=D',
                    rating: 5,
                    time: '2023-05-15',
                    content: '手机非常好用，系统流畅，拍照效果特别棒！灵动岛的设计很新颖，电量也比上一代耐用多了。'
                },
                {
                    id: 2,
                    username: '果粉一枚',
                    avatar: 'https://via.placeholder.com/40/3366cc/ffffff?text=G',
                    rating: 4,
                    time: '2023-05-10',
                    content: '从13 Pro Max升级过来的，感觉提升明显，尤其是相机和屏幕。唯一不足就是重量有点重。'
                },
                {
                    id: 3,
                    username: '科技爱好者',
                    avatar: 'https://via.placeholder.com/40/00aa00/ffffff?text=K',
                    rating: 5,
                    time: '2023-05-08',
                    content: 'A16芯片性能强劲，运行大型游戏毫无压力。4800万像素相机拍摄效果惊人，夜景表现优秀。'
                }
            ]
        })

        const selectedSpec = ref('512GB')
        const quantity = ref(1)
        const activeTab = ref('detail')

        const recommendProducts = ref([
            {
                id: 1001,
                title: 'Apple iPhone 14 Pro 5G手机 512GB 暗紫色',
                image: 'https://via.placeholder.com/300x300/3366cc/ffffff?text=iPhone14Pro',
                price: 8899,
                sold: 2800,
                shop: 'Apple官方旗舰店',
                location: '上海'
            },
            {
                id: 1002,
                title: 'Apple AirPods Pro (第二代)',
                image: 'https://via.placeholder.com/300x300/333333/ffffff?text=AirPods',
                price: 1899,
                sold: 5200,
                shop: 'Apple官方旗舰店',
                location: '上海'
            },
            {
                id: 1003,
                title: 'Apple Watch Series 8 GPS 41mm',
                image: 'https://via.placeholder.com/300x300/ff0036/ffffff?text=AppleWatch',
                price: 2999,
                sold: 3100,
                shop: 'Apple官方旗舰店',
                location: '上海'
            },
            {
                id: 1004,
                title: 'MagSafe 磁吸充电器',
                image: 'https://via.placeholder.com/300x300/999999/ffffff?text=MagSafe',
                price: 329,
                sold: 8900,
                shop: 'Apple官方旗舰店',
                location: '上海'
            }
        ])

        const addToCart = () => {
            const cartItem = {
                id: product.value.id,
                title: product.value.title,
                image: product.value.mainImage,
                price: product.value.price,
                spec: selectedSpec.value,
                quantity: quantity.value
            }

            store.commit('addToCart', cartItem)
            ElMessage.success('已加入购物车')
        }

        const buyNow = () => {
            addToCart()
            router.push('/cart')
        }

        return {
            product,
            selectedSpec,
            quantity,
            activeTab,
            recommendProducts,
            addToCart,
            buyNow
        }
    }
}
</script>

<style scoped>
.product-detail {
    margin-top: 20px;
}

.breadcrumb {
    margin-bottom: 20px;
}

.main-area {
    display: flex;
    margin: 20px 0;
    background: white;
    padding: 20px;
    border-radius: 4px;
}

.product-gallery {
    width: 450px;
}

.main-image {
    width: 100%;
    height: 450px;
    border: 1px solid #eee;
    cursor: zoom-in;
}

.thumbnails {
    display: flex;
    margin-top: 10px;
}

.thumbnail {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border: 1px solid #eee;
    cursor: pointer;
}

.thumbnail:hover {
    border-color: var(--primary-color);
}

.product-info {
    flex: 1;
    padding: 0 20px;
}

.title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.4;
}

.price-area {
    background: #fff6f6;
    padding: 15px;
    border-radius: 4px;
}

.current-price {
    color: var(--primary-color);
    font-size: 28px;
    font-weight: bold;
}

.original-price {
    color: #999;
    font-size: 16px;
    margin-top: 5px;
}

.sales {
    color: #999;
    margin: 15px 0;
}

.spec-section, .quantity-section {
    margin: 20px 0;
}

.spec-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    font-weight: bold;
}

.action-buttons {
    margin-top: 30px;
}

.action-buttons .el-button {
    width: 180px;
    height: 50px;
    font-size: 16px;
    margin-right: 15px;
}

.detail-section {
    background: white;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.review-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.review-header {
    display: flex;
    align-items: center;
}

.user-info {
    margin-left: 10px;
    flex: 1;
}

.username {
    font-weight: bold;
    margin-bottom: 5px;
}

.review-time {
    color: #999;
    font-size: 14px;
}

.review-content {
    margin-top: 10px;
    line-height: 1.6;
}

.detail-content {
    padding: 20px;
}

.detail-content h3 {
    margin: 15px 0 10px;
    font-size: 18px;
}

.detail-content p {
    margin-bottom: 10px;
    line-height: 1.6;
}
</style>